import React, { Component } from 'react'
import axios from 'axios'
import {NavLink,Outlet} from 'react-router-dom'
import '../styles/article.css'
import { Carousel } from 'antd';
import articleimg from '../images/articleimg.png'
import articlejsimg from '../images/js.png'
import articlegitimg from '../images/git.png'
import articlezyimg from '../images/章鱼.png'
type Props = {}

type State = {}

class Article extends Component<Props, State> {
  state = {
    btn:[]
  }
  componentDidMount(){
    axios.get('/api/category').then(res=>{
      this.setState({
        btn:res.data.data
      })
    })
  }
  render() {
    const {btn = []} = this.state
    return (
      <div className='article-wrap'>
        <div className='article-box'>
          <Carousel autoplay>
            <div className='contentStyle'>
              <img src={articleimg} alt="" className='article-imgs-one'/>
            </div>
            <div className='contentStyle'>
              <img src={articlejsimg} alt="" className='article-imgs-two'/>
            </div>
            <div className='contentStyle'>
              <img src={articlegitimg} alt="" className='article-imgs-three'/>
            </div>
            <div className='contentStyle'>
              <img src={articlezyimg} alt="" className='article-imgs-free'/>
            </div>
          </Carousel>
        </div>
        <div className='imgs'></div>
        <div className='article-btntop'></div>
        <div className='article-btn'>
          <NavLink to='/article/alldata'>所有</NavLink>
          {
            btn.map((item:any,index:number)=>{
              return <NavLink
              key={index}
              to={item.value}
              >{item.label}</NavLink>
            })
          }
        </div>
        <div>
          <Outlet />
        </div>
      </div>
    )
  }
}

export default Article
